<template>
  <div>
    <el-form ref="refForm" :model="formData" :rules="rules" label-width="75px">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item name="1">
          <template slot="title">
            <span class="el_title"
              >基本设置<i class="header-icon el-icon-info"
            /></span>
          </template>

          <el-form-item label="节点ID" prop="id">
            <el-input v-model="formData.id" clearable />
          </el-form-item>
          <el-form-item label="节点名称" prop="name">
            <el-input v-model="formData.name" clearable />
          </el-form-item>

          <el-form-item label="描述">
            <el-input
              v-model="formData.documentation"
              :rows="3"
              type="textarea"
              clearable
            />
          </el-form-item>

          <el-form-item
            v-if="!!showConfig.taskCategory"
            label="任务分类"
            prop="taskCategory"
          >
            <el-select v-model="formData.category">
              <el-option
                v-for="item in this.taskCategory"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="!!showConfig.conditionExpression"
            label="流转条件"
            prop="conditionExpression"
          >
            <el-input v-model="formData.conditionExpression" clearable />
          </el-form-item>

          <el-form-item v-if="!!showConfig.async" label="异步" prop="async">
            <el-switch v-model="formData.async"></el-switch>
          </el-form-item>

          <el-form-item v-if="!!showConfig.multiInstance" label="多实例">
            <el-badge :is-dot="hasMultiInstance">
              <el-button @click="multiInstanceDrawer = true">编辑</el-button>
            </el-badge>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item v-if="!!showConfig.candidate" name="2">
          <template slot="title">
            <span class="el_title"
              >候选配置<i class="header-icon el-icon-info"
            /></span>
          </template>
          <el-form-item
            v-if="!!showConfig.initiator"
            label="创建者"
            prop="initiator"
          >
            <el-input v-model="formData.initiator" clearable />
          </el-form-item>
          <el-form-item v-if="!!showConfig.assignee" label="执行人">
            <el-input v-model="formData.assignee" clearable />
          </el-form-item>
          <el-form-item v-if="!!showConfig.candidateUsers" label="候选用户">
            <el-input v-model="formData.candidateUsers" clearable />
          </el-form-item>
          <el-form-item v-if="!!showConfig.candidateGroups" label="候选组">
            <el-input v-model="formData.candidateGroups" clearable />
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item v-if="!!showConfig.form" name="3">
          <template slot="title">
            <span class="el_title"
              >表单配置<i class="header-icon el-icon-info"
            /></span>
          </template>
          <el-form-item v-if="!!showConfig.formKey" label="表单Key">
            <el-input v-model="formData.formKey" clearable />
          </el-form-item>
          <el-form-item v-if="!!showConfig.buttons" label="按钮">
            <el-input v-model="formData.buttons" clearable />
          </el-form-item>
        </el-collapse-item>

        <el-collapse-item name="4">
          <template slot="title">
            <span class="el_title"
              >监听器<i class="header-icon el-icon-info"
            /></span>
          </template>
          <el-form-item label="执行监听">
            <el-badge :value="executionListenerLength">
              <el-button @click="executionListenerDrawer = true"
                >编辑</el-button
              >
            </el-badge>
          </el-form-item>
          <el-form-item v-if="!!showConfig.taskListener" label="任务监听">
            <el-badge :value="taskListenerLength">
              <el-button @click="taskListenerDrawer = true">编辑</el-button>
            </el-badge>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form>

    <multi-instance
      title="多实例"
      v-if="!!showConfig.multiInstance"
      :element="element"
      :modeler="modeler"
      @changeMultiInstanceDrawer="changeMultiInstanceDrawer"
      @saveMultiInstance="saveMultiInstance"
      :multiInstanceDrawer="multiInstanceDrawer"
    ></multi-instance>
    <listener
      title="执行监听"
      type="Execution"
      :element="element"
      :modeler="modeler"
      @changeListenerDrawer="changeExecutionListenerDrawer"
      @saveListener="saveExecutionListener"
      :listenerDrawer="executionListenerDrawer"
    ></listener>
    <listener
      title="任务监听"
      type="Task"
      :element="element"
      :modeler="modeler"
      @changeListenerDrawer="changeTaskListenerDrawer"
      @saveListener="saveTaskListener"
      :listenerDrawer="taskListenerDrawer"
    ></listener>
  </div>
</template>

<script>
import mixinPanel from "../mixins/mixinPanel";
import MultiInstance from "../properties/multiInstance";
import listener from "../properties/listener";

export default {
  name: "BpmnNode",
  components: { listener, MultiInstance },
  mixins: [mixinPanel],
  props: {
    taskCategory: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      activeName: "1",
      formData: {},
      rules: {
        id: [{ required: true, message: "该项不能为空", trigger: "change" }],
        name: [{ required: true, message: "该项不能为空", trigger: "change" }],
      },
      multiInstanceDrawer: false,
      hasMultiInstance: false,
      executionListenerDrawer: false,
      executionListenerLength: 0,
      taskListenerDrawer: false,
      taskListenerLength: 0,
    };
  },
  watch: {
    "formData.initiator": function (val) {
      this.updateProperty("initiator", val, true);
    },
    "formData.category": function (val) {
      this.updateProperty("category", val, true);
    },
    "formData.formKey": function (val) {
      this.updateProperty("formKey", val, true);
    },
    "formData.buttons": function (val) {
      this.updateProperty("buttons", val, true);
    },
    "formData.async": function (val) {
      this.updateProperty("async", val, true);
    },
    "formData.conditionExpression": function (val) {
      if (val) {
        const newCondition = this.modeler
          .get("moddle")
          .create("bpmn:FormalExpression", { body: val });
        this.updateProperties({ conditionExpression: newCondition });
      } else {
        this.updateProperties({ conditionExpression: null });
      }
    },
    "formData.skipExpression": function (val) {
      this.updateProperty("skipExpression", val, true);
    },
    "formData.assignee": function (val) {
      this.updateProperty("assignee", val, true);
    },
    "formData.candidateUsers": function (val) {
      this.updateProperty("candidateUsers", val, true);
    },
    "formData.candidateGroups": function (val) {
      this.updateProperty("candidateGroups", val, true);
    },
    "formData.dueDate": function (val) {
      this.updateProperty("dueDate", val, true);
    },
    "formData.priority": function (val) {
      this.updateProperty("priority", val, true);
    },
    "formData.isForCompensation": function (val) {
      this.updateProperty("isForCompensation", val);
    },
    "formData.triggerable": function (val) {
      this.updateProperty("triggerable", val, true);
    },
    "formData.class": function (val) {
      this.updateProperty("class", val, true);
    },
    "formData.autoStoreVariables": function (val) {
      this.updateProperty("autoStoreVariables", val, true);
    },
    "formData.exclude": function (val) {
      this.updateProperty("exclude", val, true);
    },
    "formData.ruleVariablesInput": function (val) {
      this.updateProperty("ruleVariablesInput", val, true);
    },
    "formData.rules": function (val) {
      this.updateProperty("rules", val, true);
    },
    "formData.resultVariable": function (val) {
      this.updateProperty("resultVariable", val, true);
    },
  },
  created() {
    const data = {
      ...this.element.businessObject,
      ...this.element.businessObject.$attrs,
    };
    data.documentation = this.getDocumentation();
    data.conditionExpression = this.element.businessObject.conditionExpression && this.element.businessObject.conditionExpression.body;
    if(data['flowable:assignee']) {
      data.assignee = data['flowable:assignee']
    }
    this.formData = data;
    this.hasMultiInstance = this.element.businessObject.loopCharacteristics
      ? true
      : false;
    this.executionListenerLength =
      this.element.businessObject.extensionElements&& this.element.businessObject.extensionElements.values.filter(
        (item) => item.$type === this.descriptorPrefix + "ExecutionListener"
      ).length || 0;
    this.taskListenerLength =
      this.element.businessObject.extensionElements&&this.element.businessObject.extensionElements.values.filter(
        (item) => item.$type === this.descriptorPrefix + "TaskListener"
      ).length || 0;
  },
  methods: {
    changeMultiInstanceDrawer(v) {
      this.multiInstanceDrawer = v;
    },
    saveMultiInstance(v) {
      this.hasMultiInstance = v;
    },
    changeExecutionListenerDrawer(v) {
      this.executionListenerDrawer = v;
    },
    saveExecutionListener(v) {
      this.executionListenerLength = v;
    },
    changeTaskListenerDrawer(v) {
      this.taskListenerDrawer = v;
    },
    saveTaskListener(v) {
      this.taskListenerLength = v;
    },
  },
};
</script>

<style lang="scss">
</style>